<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>flyapi首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <th:block th:include="common/link::link"></th:block>
</head>

<body>

<div class="header">
    <th:block th:include="common/header::header"></th:block>
</div>

<div class="main layui-clear">
    <div class="wrap">
        <div class="content">
            <!--            <div class="fly-tab fly-tab-index">
                                    <span>
                                      <a href="javascript:void(0)" onclick="homeFn()">首页推荐</a>
                                      <a href="javascript:void(0)" onclick="topicFn()">周刊</a>
                                    </span>
                            <form action="#" class="fly-search">
                                <i class="iconfont icon-sousuo"></i>
                                <input class="layui-input" autocomplete="off" placeholder="搜索内容，回车跳转" type="text" name="q">
                            </form>
                            <a href="" target="_blank" class="layui-btn jie-add">发布文章</a>
                        </div>-->

            <div class="layui-carousel" id="carousel-index" >
                <div carousel-item=""  id="cal-list">
                    <th:block th:if="${not #lists.isEmpty(carouselList)}">
                        <th:block th:each="carousel,index:${carouselList}">
                            <div><a href="#" th:href="${carousel.detailUrl}"><img style="border-radius: 5px" src="'#" title="轮播图" th:src="${carousel.imgUrl}" th:title="${carousel.title}"/></a></div>
                        </th:block>
                    </th:block>
                </div>
            </div>
            <ul class="fly-list" id="article-list">
            </ul>

        </div>
    </div>

    <div class="edge">
        <div class="fly-panel leifeng-rank">
            <h3 class="fly-panel-title">今日名人榜- TOP 8</h3>
            <dl>
                <th:block th:if="${not #lists.isEmpty(topList)}">
                    <th:block th:each="top,index:${topList}">
                        <dd>
                            <a href="#" th:href="@{${rootPath} + '/user/'+${top.userId}}">
                                <img src="" th:src="${top.avatar}">
                                <cite th:text="${top.nickName}"></cite>
                                <i th:text="'NO.'+${index.index+1}">NO.1</i>
                            </a>
                        </dd>
                    </th:block>
                </th:block>

            </dl>
        </div>

        <dl class="fly-panel fly-list-one" id="hot-article">
            <dt class="fly-panel-title">今日热门</dt>
            <th:block th:if="${not #lists.isEmpty(hotList)}">
                <th:block th:each="hot,index:${hotList}">
                    <dd>
                        <span class="fly-badge" th:class="'fly-badge fly-badge-'+${index.index}" th:text="${index.index+1}"></span>
                        <a href="#" th:href="@{${rootPath} + '/article/detail/'+${hot.articleId}}" th:text="${hot.title}">标题</a>
                        <span><i class="fa fa-eye fa-fw"></i> <span th:text="${hot.viewNum}"></span></span>
                    </dd>
                </th:block>
            </th:block>
        </dl>

        <dl class="fly-panel fly-list-one" id="last-update">
            <dt class="fly-panel-title">最近更新</dt>
            <th:block th:if="${not #lists.isEmpty(updateList)}">
                <th:block th:each="update,index:${updateList}">
                    <dd>
                        <a href="/#" th:href="@{${rootPath} + '/article/detail/'+${update.articleId}}" th:text="${update.title}">标题</a>
                        <span><i class="fa fa-clock-o fa-fw"></i> <span th:text="${#dates.format(update.createTime, 'hh:mm')}"></span></span>
                    </dd>
                    </dd>
                </th:block>
            </th:block>
        </dl>

    </div>
</div>
<th:block th:replace="common/footer::footer"></th:block>
<script>

    $("a").removeClass("nav-this");
    $("#home").addClass("nav-this")

    /*    $.getJSON("../setting/carousel", {}, function (result) {
            $.each(result.data, function (index, carousel) {
                $("#cal-list").append('<div><a href="index.html" ><img src="'+carousel.imgUrl+'" title="'+carousel.title+'"/></a></div>');
            });
        });*/
    /*    $.ajax({
            type: 'POST',
            url: "../article/findLastUpdateOrHotArticles",
            dataType: "json",
            data: {"type": 1},
            success: function (result) {
                $.each(result.data, function (index, last) {
                    $("#last-update").append('<dd><a href="/article/detail.html/' + last.articleId + '">' + last.title + '</a><span><i class="fa fa-clock-o fa-fw"></i> ' + timeAgo(getMyDate(last.createTime)) + '</span></dd>');
                });
            }
        });
        $.getJSON("../article/findLastUpdateOrHotArticles", {"type": 2}, function (result) {
            $.each(result.data, function (index, hot) {
                $("#hot-article").append('<dd><span class="fly-badge fly-badge-'+index+'">'+index+'</span><a href="/article/detail.html/' + hot.articleId + '">' + hot.title + '</a><span><i class="fa fa-eye fa-fw"></i> ' + hot.viewNum + '</span></dd>');
            });
        });*/

</script>
<script th:inline="javascript">

    function likeFn() {
        $("a").removeClass("tab-this")
        $("#like").addClass("tab-this");
    };

    layui.use('flow', function () {
        var flow = layui.flow;
        var pageCount;
        var rootPath = [[${rootPath}]];
        flow.load({
            elem: '#article-list', //流加载容器
            scrollElem: '#article-list', //滚动条所在元素，一般不用填，此处只是演示需要。
            isAuto: false,
            isLazyimg: true,
            done: function (page, next) { //加载下一页

                //模拟插入
                setTimeout(function () {
                    var lis = [];
                    $.ajax({
                        type: 'POST',
                        url: rootPath+"/article/findArticleList",
                        dataType: "json",
                        data: {
                            "pageNum": page,
                            "pageSize": 6
                        },
                        success: function (result) {
                            pageCount = result.data.pages;
                            $.each(result.data.list, function (index, simple) {
                                var cover = '<a class="des-img">' +
                                    '<img src="' + simple.cover + '">' +
                                    '</a>';
                                if(simple.cover == null || simple.cover == ''){
                                    cover = '';
                                }

                                lis.push('<li class="note-list">' +cover +
                                    '<div><div class="author">' +
                                    '<a class="avatar" target="_blank" href="user/'+simple.userId+'">' +
                                    '<img src="'+simple.avatar+'">' +
                                    '</a><div class="name">' +
                                    '<a class="blue-link" target="_blank" href="#">' + simple.nickName + '</a>' +
                                    '<span class="time" data-shared-at="2017-04-05T09:53:58+08:00">&nbsp;&nbsp;&nbsp;' + timeAgo(getMyDate(simple.createTime)) + '</span></div></div>' +
                                    '<h2 class="fly-tip"><a target="_blank" href="article/detail/' + simple.articleId + '">' + simple.title + '</a></h2>' +
                                    '<p class="abstract">' + simple.articleDes + '</p>' +
                                    '<div class="meta"><a class="collection-tag" target="_blank" href="/article/list/'+simple.subjectId+'/'+simple.subjectTitle+'">' + simple.subjectTitle + '</a>' +
                                    '&nbsp;<span><i class="fa fa-eye fa-fw" title="阅读"></i> ' + simple.viewNum + '</span>&nbsp;' +
                                    '<span><i class="fa fa-commenting fa-fw" title="回答"></i>' + simple.commentNum + '</span>&nbsp; ' +
                                    '<span><i class="fa fa-thumbs-o-up fa-fw" title="人气"></i> ' + simple.likeNum + '</span></div></div></li>');
                                //alert("qian"+lis)
                                next(lis.join(''), page < pageCount);
                                lis = [];
                            });
                        }
                    });
                    // next(lis.join(''), page < pageCount); //假设总页数为 6
                }, 500);
            }
        });
    });

    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#carousel-index',
            width: '100%', //设置容器宽度
            height: '260px',
            arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });

    layui.use(['util', 'element', 'layer','form','laytpl','laypage'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var laytpl = layui.laytpl;
        var form = layui.form;  //表单的依赖
        var laypage = layui.laypage;//分页的依赖
        var element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块

        //右下角bar top
        util.fixbar({
            bar1: true,
            click: function(type){
                console.log(type);
                if(type === 'bar1'){
//                    alert('点击了bar1')
                }
            }
        });
    });
</script>
</body>

</html>